react clean-code

コンポーネント

hr.icon

重複する要素を軽めのコンポーネントにまとめる

コンポーネントを小さく分ける

似てる・直に関連してるコンポーネントは同じディレクトリでまとめて管理する

カスタムフック

hr.icon

再利用できるロジックは、グローバルに分離する（DRYの原則）

カスタムフックを使って、共通コードを抜き出す（DRYの原則）

カスタムフックを肥大化させない。カスタムフック内で定義する必要ない機能はフック外で定義する

JSX

hr.icon

JSXのショートカット記法を利用する

code: sample.js

return ( {showTitle && <h1>this is title</h1>} );

可読性が悪くなるので、JSXの中で三項演算子は利用しない

三項演算子の代わりに、「!」を利用する

code: ok.js

{showTitle && <p>The condition must be true!</p>}

{!showTitle && <p>The condition must be false!</p>}

JSXの中からjavascript記法をできる限り切り離す

JSXの中でinline styleも使わない

code: ok.js

<Sample isHungry />

オブジェクトは崩して使う

code: sample.js

const {name, age} = props

propsをちゃんと分解して利用する

code: sample.js

const Component = ({name, age}) => {

}

その他

hr.icon

モジュールのimportは絶対パスを利用する

importの書き方や順序には、一貫したルールを設ける

一貫したコードにするために、命名規則を定めておく

コーディングのガイドラインを作る

propsのバケツリレーを避けたいなら、コンテキストを利用する